import { Bars3Icon, BellIcon } from '@heroicons/react/24/outline'
import { useAuthStore } from '@/stores/authStore'

interface HeaderProps {
  onMenuClick: () => void
}

const Header = ({ onMenuClick }: HeaderProps) => {
  const { user } = useAuthStore()

  return (
    <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-white/20 bg-white/95 backdrop-blur-md px-4 shadow-soft sm:gap-x-6 sm:px-6 lg:px-8">
      {/* 移动端菜单按钮 */}
      <button
        type="button"
        className="-m-2.5 p-2.5 text-secondary-700 hover:text-primary-600 lg:hidden transition-colors duration-200"
        onClick={onMenuClick}
      >
        <span className="sr-only">打开侧边栏</span>
        <Bars3Icon className="h-6 w-6" aria-hidden="true" />
      </button>

      {/* 分隔线 */}
      <div className="h-6 w-px bg-white/30 lg:hidden" aria-hidden="true" />

      <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
        {/* 搜索框占位 */}
        <div className="flex flex-1">
          {/* 可以在这里添加搜索功能 */}
        </div>
        
        <div className="flex items-center gap-x-4 lg:gap-x-6">
          {/* 通知按钮 */}
          <button
            type="button"
            className="-m-2.5 p-2.5 text-secondary-400 hover:text-primary-600 hover:bg-primary-50/50 rounded-lg transition-all duration-200"
          >
            <span className="sr-only">查看通知</span>
            <BellIcon className="h-5 w-5" aria-hidden="true" />
          </button>

          {/* 分隔线 */}
          <div
            className="hidden lg:block lg:h-6 lg:w-px lg:bg-white/30"
            aria-hidden="true"
          />

          {/* 用户头像 */}
          <div className="flex items-center gap-x-3">
            <div className="avatar">
              {user?.avatar ? (
                <img
                  className="avatar-image"
                  src={user.avatar}
                  alt={user.displayName || user.username}
                />
              ) : (
                <div className="avatar-fallback">
                  {(user?.displayName || user?.username || 'U').charAt(0).toUpperCase()}
                </div>
              )}
            </div>
            <div className="hidden lg:block">
              <p className="text-sm font-semibold text-secondary-900">
                👤 {user?.displayName || user?.username}
              </p>
              <p className="text-xs text-green-600 font-medium">
                💚 在线
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Header